<template> 
  <div class="container"> 
    <div class="total-border">    
      <el-header>
        <div class="heade"> 
          <div class="title-left">
            <el-button
              size="large"
              @click.native="backtoList" icon="el-icon-arrow-left" plain>返回</el-button>  
            </div>       
            <div class="title">
              <h1>添加饮食</h1> 
            </div>     
        </div>   
      </el-header>
    <!-- 添加    -->

      <div class="border">   
        <h1></h1>
        <el-form ref="form" label-width="85px" >
          <el-form-item label="食物名称" >
            <!-- <el-input style="width: 90%;margin-left:-150px;" v-model="dietInfoPO.name" :disabled="true"></el-input> -->
           <span style="font-size:18px"> {{dietInfoPO.name}}</span>
          </el-form-item>
          <el-form-item label="用餐时段" >
            <el-select style="width: 90%;margin-left:-65px;" v-model="type" placeholder="请选择用餐时段">
              <el-option label="早餐" value="BREAKFAST"></el-option>
              <el-option label="中餐" value="LUNCH"></el-option>
              <el-option label="晚餐" value="SUPPER"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用餐时间" >
            <el-date-picker type="date" placeholder="选择日期" style="width: 90%;margin-left:-70px;" v-model="date" ></el-date-picker>
          </el-form-item>
          <el-form-item label="食物份量">
            <el-input placeholder="0" type="number" style="width: 90%;margin-left:-65px;" min="0" v-model="amount"></el-input>
            <span>{{this.dietInfoPO.unit}}</span> 
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" style="width: 90%;margin-left:-70px;" v-model="comment"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button type="primary"  @click.native="backtoHome">取消</el-button>
          </el-form-item>
        </el-form>
      </div> 
    </div> 
    <div class="footer"> 
      <el-button
        size="large"
        @click.native="backtoHome">返回饮食主页</el-button>   
    </div>
  </div>
</template> 
<script>
import { get, post } from "../ajax";
import { MessageBox } from "element-ui";

export default {
  name: "AddDiet",
  components: {},
  data() {
    return {
      type: "",
      date: "",
      amount: 0,
      comment: "",
      dietInfoPO: ""
    };
  },
  created() {},
  async mounted() {
    const dietId = parseInt(this.$route.query.dietId);
    const res = await get("/SmartMachine/api/Diet/diet", {
      body: {
        dietId: dietId
      }
    });
    this.dietInfoPO = res.data;
    this.type = this.$route.query.type;
    this.date = this.$route.query.date;
  },
  methods: {
    buildData() {
      const data = {
        dietInfoPO: this.dietInfoPO,
        dietRecordPO: {
          userId: this.$route.query.userId,
          dietId: this.dietInfoPO.id,
          amount: this.amount,
          date: this.date,
          type: this.type,
          energy: this.amount * this.dietInfoPO.kcal,
          comment: this.comment,
        }
      };
      return data;
    },
    backtoList() {
      this.$router.push({
        path: "/dietList",
        query: {
          userId: this.$route.query.userId,
          type: this.$route.query.type,
          date: this.$route.query.date
        }
      });
    },
    backtoHome(){
      this.$router.push({
        path: "/diet",
        query:{
          userId:this.$route.query.userId,
          date:this.$route.query.date,
        }
      })
    },
    async onSubmit() {
      //console.log("submit!");
      const data = this.buildData();
      //console.log(data);
      if(data.dietRecordPO.amount<=0){
        MessageBox.alert(`输入食物份量！`, "饮食记录管理", {
          confirmButtonText: "好的",
        })
      }else{
        const res = await post("/SmartMachine/api/Diet/records", {
          body: data
        });
        //console.log(res);
        if (!res.error) {
          /*
          * @method confirm  消息确认框，支持两个按钮
          * @method trycatch 捕获点击取消按钮事件，点击取消会抛出异常，用trycatch 捕获
          * @param  result   加上await ，点击确认后，result 为 confirm 
          */
          try {
            const result = await MessageBox.confirm(`添加成功`, "饮食记录管理", {
              confirmButtonText: "返回饮食主页",
              showCancelButton: true,
              cancelButtonText: "继续添加",
            });
            if (result === 'confirm') {
              //confirmButton
              this.backtoHome();
            }
          } catch (error) {
            //cancelButton
            this.backtoList();
          }
        }
      }

    },

  }
};
</script> 
<style scoped>
.container {
  width: 100%;
  margin: 0 auto;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin: 20px;
}
.heade {
  display: flex;
  margin-left: 130px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 15px;
}
.total-border {
  width: 96%;
  height: 550px;
  border: 1px solid #ccc;
  margin: 20px;
}
.border {
  width: 98%;
  height: 400px;
  border: 1px solid #ccc;
  margin: 10px;
}
.item {
  flex: 0 0 30%;
  margin-top: 20px;
  margin: 20px;
  text-align: center;
  font-size: 50px;
  line-height: 5px;
}
.title {
  flex: 0 0 30%;
  margin-top: 3px;
  margin-left: 35%;
  font-size: 10px;
  line-height: 25px;
}
.title-left {
  margin-left: -20%;
}
.form{
  font-size: 100px;
}

border.el-form-item__label{
  font-size: 1.5em;
}
</style> 

<style>
  .el-form-item__label{

    font-size:18px!important;
    margin-left:10px!important;
  }
</style>